<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>签约病人列表血压显示</title>
    <link rel="stylesheet" href="${assets}/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-table.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/headBase.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/ChronicBaseIndex.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/planBase.css">
    <link rel="stylesheet" href="${newframe}/css/select2.min.css" type="text/css">
    <style>
        .select2-container {
            width: 100% !important;
        }
        #patientTable tr{
            cursor:pointer;
        }
    </style>
    <script src="${assets}/js/jquery-1.9.1.min.js"></script>
    <script src="${assets}/js/bootstrap.min.js"></script>
    <script src="${frames}/js/lib/bootstrap-table.js"></script>
    <script src="${frames}/js/lib/bootstrap-table-zh-CN.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${newframe}/echarts/echarts-all.js"></script>
    <script src="${newframe}/js/select2.full.zh.js"></script>
    <script src="${newframe}/base/base.js"></script>
    <%-- <script src="${frames}/Chronic/js/ChronicIndex.js" type="text/javascript"></script> --%>
</head>
<body>
<div class="wrap">
    <%--<div class="header">--%>
            <%--<span class="logo">--%>
                <%--<img src="${frames}/Chronic/ChronicImg/logo.png" alt="美康医卫士">--%>
            <%--</span>--%>
        <%--<div class="loginUser">--%>
            <%--<span class="loginU">登录用户:</span>--%>
            <%--<span class="name">${username}</span>--%>
        <%--</div>--%>

    <%--</div>--%>
    <%--<div class="nav">--%>
        <%--<ul>--%>
            <%--<li class="nav_cur"><a href="${ctx}/chronic/getBpList?username=${user_name}&&pwd=${pwd}">血压</a></li>--%>
            <%--<li><a href="${ctx}/chronic/getBsList?username=${user_name}&&pwd=${pwd}">血糖</a></li>--%>
        <%--</ul>--%>
    <%--</div>--%>
    <div class="body">
        <div class="leftList">
            <%--<input type="button" value="控制血压方案" class="newPlan" data-toggle="modal" data-target="#myModal" onclick="myModal();">--%>
            <h5>用户列表</h5>
            <form action="">
                <label>姓名:</label>
                <input id="name" type="text" placeholder="输入首字母" class="name">
                <input id="btn_search" type="button" value="查询" class="search">
            </form>
            <div>
                <table id="patientTable" data-pagination="true" data-toggle="table" data-click-to-select="true"
                       data-single-select="true">
                    <thead>
                    <tr>
                        <th data-field="name">姓名</th>
                        <th data-field="gender">性别</th>
                        <th data-field="age">年龄</th>
                        <th data-field="drName">医生</th>
                        <th data-field="pId" style="display: none">病人id</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
        <div class="tableContent">
            <div class="InContent">
                <div class="list">
                    <div class="listTitle">
                        <h4>血压图表监控</h4>
                    </div>
                    <div class="dateTime">
                        <div class="datepicker">
                            <label>日期：</label>
                            <input id="beginDate" type="text" class="lay-date" placeholder="选择日期" readonly>
                            &emsp;到&emsp;
                            <input id="endDate" type="text" class="lay-date" placeholder="选择日期" readonly>
                        </div>
                        <div class="form">
                            <input type="radio" id="All" checked="checked" name="period" value="0">
                            <label name="All" class="checked" for="All">全部</label>
                        </div>
                        <div id="lineTable" class="lineTable">
                            <table id="table"
                                   data-toggle="table"
                                   data-classes="table table-no-bordered"
                                   data-click-to-select="true" data-single-select="true"
                                   data-height="180">
                                <thead>
                                <tr>
                                    <th data-field="date">测量日期</th>
                                    <th data-field="time">测量时间</th>
                                    <th data-field="testValue">收缩压/舒张压</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="listTitle">
                        <h4>血压方案</h4>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function initTablePatient() {
        $('#patientTable').bootstrapTable('destroy');
        $("#patientTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_SEARCHPATIENT}", //获取数据的Servlet地址
            //cache: false,
            //striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    name: $("#name").val()
                };
                return param;
            },
            onClickRow: function (row, $element) {
                $('.success').removeClass('success');//去除之前选中的行的，选中样式
                $element.addClass('success');//添加当前选中的 success样式用于区别
                $("#patientName").val(row.name);
                $("#patientId").val(row.pId);
                initLineTable(row.patientIdCard);

            },
            onLoadSuccess: function () {  //加载成功时执行
//            	alert("加载成功");
            },
            onLoadError: function () {  //加载失败时执行
                alert("加载数据失败");
            }


        });
    }

    function initLineTable(patientIdCard) {
        var idCard = '${idCard}';
        //获得选中radio的值
        var timeType = $("input[name='period']:checked").val();
        $('#table').bootstrapTable('destroy');
        $("#table").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_GETBSMGR}", //获取数据的Servlet地址
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    username: 13056708026,
                    pwd:123456,
                    patientIdCard:patientIdCard,
                    beginDate: $("#beginDate").val(),
                    endDate: $("#endDate").val(),
                    timeType: timeType
                };
                return param;
            },
            onLoadSuccess: function (data) {  //加载成功时执行
                console.log(data);
            },
            onLoadError: function () {  //加载失败时执行
                alert("加载数据失败");
            }
        });
    }
    function initLayDate(id) {
        laydate({
            elem: id,
            istime: true,
            format: 'YYYY-MM-DD',
            choose: function (dates) { //选择好日期的回调
//                initLineTable();
            }
        })
    }
    $(document).ready(function () {
        //调用函数，初始化表格
        initTablePatient();
        $('.dateTime .form label').click(function () {
            //alert(78);
            var radioId = $(this).attr('name');
            $('.form label').removeAttr('class') && $(this).attr('class', 'checked');
            $(this).css('background', 'url(${frames}/Chronic/ChronicImg/bg1.png) no-repeat left center').siblings('label').css('background', 'url(${frames}/Chronic/ChronicImg/bg.png) no-repeat left center');
            $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
        });
        $("input[name=period]").click(function () {
//            initLineTable();
        });
        initLayDate('#beginDate')
        initLayDate('#endDate')
        //初始化表格
        //设置默认时间
        var date = new Date();
        var date2 = new Date(date - 1000 * 60 * 60 * 24 * 30);
        $("#beginDate").val(date2.getFullYear() + '-' + coverZero(date2.getMonth() + 1) + '-' + coverZero(date2.getDate()));
        $("#endDate").val(date.getFullYear() + '-' + coverZero(date.getMonth() + 1) + '-' + coverZero(date.getDate()));
//        initLineTable();
        $('#patientTable').bootstrapTable('hideColumn', 'pId');
        $('#abnormalTable').bootstrapTable('hideColumn', 'pId');

        $(window).resize(function () {
            $('.abnormalList').bootstrapTable('resetView');
            $('.remindTable').bootstrapTable('resetView');
            $('.userMsgTabel').bootstrapTable('resetView');
        });

        $("#btn_search").bind("click", initTablePatient);
        $('.nav ul li').click(function () {
            $(this).addClass('nav_cur').siblings().removeClass('nav_cur');

        })

    });
//    function getCheckedArray() {
//        var checkedArray = [];
//        $("#bloodTable input[name='btSelectItem']").each(function () {
//            if (this.checked) {
//
//                console.log($("#bloodTable").bootstrapTable('getSelections')[0]);
//                var _id = $("#bloodTable").bootstrapTable('getSelections')[0].id;
//                var _name = $("#bloodTable").bootstrapTable('getSelections')[0].patientName;
//                var _pId = $("#bloodTable").bootstrapTable('getSelections')[0].patientId;
//                checkedArray.push(_id);
//                checkedArray.push(_name);
//                checkedArray.push(_pId);
//            }
//        });
//        return checkedArray;
//    }
</script>
</body>
</html>